<template>
  <div class="easy-nous">
    <!-- Header Section -->
    <el-row class="header" justify="center">
      <el-col :span="20" class="header-content">
        <div class="title">知识图谱 EasyNous</div>
        <div class="subtitle">
          知识图谱（EasyNous）作为一站式领域知识图谱落地构建、智能检索、关联分析平台，帮助用户完成高价值的知识积累与分析，提供基于知识的关系分析、搜索、推荐、问答等智能化服务。
        </div>
        <div class="cta-button">
          <el-button type="primary" round size="large">咨询我们</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- Navigation Links -->
    <el-row class="navigation" justify="center">
      <el-col :span="24">
        <el-menu mode="horizontal" :default-active="activeMenu" class="nav-menu">
          <el-menu-item index="advantages" @click="scrollTo('advantages')">产品优势</el-menu-item>
          <el-menu-item index="architecture" @click="scrollTo('architecture')">产品架构</el-menu-item>
          <el-menu-item index="features" @click="scrollTo('features')">产品功能</el-menu-item>
          <el-menu-item index="scenarios" @click="scrollTo('scenarios')">应用场景</el-menu-item>
          <el-menu-item index="characteristics" @click="scrollTo('characteristics')">产品特性</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <!-- Sections -->
    <div ref="advantages" class="section" id="advantages">
      <div class="feature-container">
        <h2 class="section-title">产品优势</h2>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="advantage-card">
              <img src="@/assets/img/3.png" alt="1" class="icon" />
              <h3>动态构建图谱</h3>
              <p>动态构建文本，实体关系自动识别，4步实现标准化图谱构建。</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="advantage-card">
              <img src="@/assets/img/4.png" alt="1" class="icon" />
              <h3>高效存储计算</h3>
              <p>多模态数据存储，百亿级图谱秒级查询，30+种图库计算算法。</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="advantage-card">
              <img src="@/assets/img/2.png" alt="1" class="icon" />
              <h3>辅助智能决策</h3>
              <p>实体语义关联，多维度可视化展示，智能知识管理与建模。</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 产品功能 Section -->
    <div ref="features" class="section feature-section" id="features">
      <div class="feature-container">
        <h2 class="section-title">产品功能</h2>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="feature-card">
              <img src="../assets/img/7.png" alt="1" class="icon"/>
              <h3>知识构建</h3>
              <p>提供多维态数据接入、实体构建、实体关系抽取、知识融合、数据入库。</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-card">
              <img src="../assets/img/8.png" alt="1" class="icon"/>
              <h3>知识检索</h3>
              <p>提供多模态检索、智能推荐，支持语义检索、实体详情展示。</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-card">
              <img src="../assets/img/9.png" alt="1" class="icon"/>
              <h3>知识分析</h3>
              <p>实现实体关联的关系发现、链路挖掘和可视化分析，助力业务决策。</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-card">
              <img src="../assets/img/9.png" alt="1" class="icon"/>
              <h3>知识表示</h3>
              <p>通过多维可视化展示实体间关系，支持图谱查询和可视化呈现。</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 产品架构 Section -->
    <div ref="scenarios" class="section" id="scenarios">
      <div class="feature-container">
      <h2 class="section-title">产品架构</h2>
        <img src="../assets/img/5.png" alt="产品架构" class="img"/>
      </div>
    </div>

    <!-- 产品特性 Section -->
    <div ref="characteristics" class="section" id="characteristics">
      <div class="feature-container">
      <h2 class="section-title">产品特性</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="feature-card">
            <h3>简单易用</h3>
            <p>可视化本体构建、实体关系自动识别、流程化图谱构建，快速进行知识分析。</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card">
            <h3>深度分析</h3>
            <p>提供复杂实体关系梳理和多科图分析，帮助用户精准洞察关系链路。</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card">
            <h3>多租户多实例</h3>
            <p>多租户图谱资源隔离，支持场景化应用和协同分析。</p>
          </div>
        </el-col>
      </el-row>
        </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'EasyNous',
  data() {
    return {
      activeMenu: 'advantages',
    };
  },
  methods: {
    scrollTo(section) {
      const el = this.$refs[section];
      if (el) {
        el.scrollIntoView({ behavior: 'smooth' });
        this.activeMenu = section;
      }
    },
  },
};
</script>

<style scoped>
.easy-nous {
  font-family: Arial, sans-serif;
}

.header {
  background: url('../assets/img/1.jpg') no-repeat center center; /* 添加背景图 */
  background-size: cover; /* 让背景图覆盖整个Header区域 */
  padding: 50px 0;
  text-align: center;
}
.img{
  width: 130vh;
}
.icon{
  width: 8vh;
  height: auto;
}

.header-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.header-content .title {
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 20px;
}

.subtitle {
  width: 50%; /* 占页面宽度的一半 */
  text-align: left; /* 文字左对齐 */
  line-height: 1.8; /* 增加行高 */
  font-size: 16px;
  color: #606266; /* 字体颜色 */
  margin: 20px 0; /* 上下外边距 */

  box-sizing: border-box; /* 包括内边距在宽度内 */
}


.cta-button .el-button {
  background-color: #409eff;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 12px 20px;
  transition: all 0.3s;
}

.cta-button .el-button:hover {
  background-color: #66b1ff;
}

.navigation {
  margin-top: 20px;
  border-bottom: 1px solid #ebeef5;
}

.nav-menu {
  border-bottom: none;
}

.nav-menu .el-menu-item {
  font-size: 16px;
  color: #303133;
  padding: 0 20px;
  transition: color 0.3s;
}

.nav-menu .el-menu-item:hover {
  color: #409eff;
}

.nav-menu .el-menu-item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}

.section {
  text-align: center; /* 标题居中 */
  padding: 40px 20px;
  background-color: #f8f9fb; /* 页面背景色 */
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.el-row {
  display: flex;
  flex-wrap: wrap; /* 多行排列 */
  justify-content: center; /* 卡片居中显示 */
  gap: 20px; /* 卡片之间间距 */
}

.feature-container {
  max-width: 1200px; /* 内容区域最大宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px; /* 内边距 */
  background-color: #fff; /* 内部容器纯白色背景 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
}
.advantage-card,
.feature-card {
  background: #fff; /* 卡片背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
  padding: 20px;
  text-align: left; /* 卡片内容左对齐 */
  width: 300px; /* 统一卡片宽度 */
  min-height: 150px; /* 卡片最小高度 */
  transition: all 0.3s ease-in-out;
}

.advantage-card h3,
.feature-card h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.advantage-card p,
.feature-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.advantage-card:hover,
.feature-card:hover {
  transform: translateY(-5px); /* 鼠标悬停微小上移 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

</style>
